<template>
  <el-table :data="arr">
    <el-table-column type="index" label="编号" width="100px"></el-table-column>
    <el-table-column prop="username" label="用户名"></el-table-column>
    <el-table-column prop="nickname" label="昵称"></el-table-column>
    <el-table-column label="头像">
      <template #default="scope">
        <el-avatar :src="BASE_URL+scope.row.imgUrl"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column label="管理员">
      <template #default="scope">
       <el-switch @change="changeAdmin(scope.row)" :active-value="1"
                  :inactive-value="0" v-model="scope.row.isAdmin"></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button style="width: 100%" plain type="success" @click="dialogVisible=true">添加用户</el-button>
  <el-dialog title="添加用户" v-model="dialogVisible">
    <el-form label-width="100px">
      <el-form-item label="用户名"><el-input v-model="user.username"></el-input></el-form-item>
      <el-form-item label="密码"><el-input v-model="user.password"></el-input></el-form-item>
      <el-form-item label="昵称"><el-input v-model="user.nickname"></el-input></el-form-item>
      <el-form-item><el-button @click="add()">添加</el-button></el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from 'element-plus'
import axios from "axios";
import qs from "qs";
const user = ref({username:'',password:'',nickname:''})
const add = ()=>{
  dialogVisible.value=false;
  let data = qs.stringify(user.value);
  axios.post(BASE_URL+'/v1/users/reg',data).then((response)=>{
    if (response.data.code==2001){
      ElMessage.success("添加完成!");
      user.value={username:'',password:'',nickname:''}
      loadData();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const dialogVisible = ref(false);
const changeAdmin = (user)=>{
  let data = qs.stringify({id:user.id,isAdmin:user.isAdmin});
  axios.post(BASE_URL+'/v1/users/update',data)
  .then((response)=>{
    if (response.data.code==2001){
      ElMessage.success("修改完成!");
    }
  })

}
const del = (i,user)=>{
  if (confirm("您确认删除"+user.nickname+"吗?")){
    axios.post(BASE_URL+'/v1/users/'+user.id+"/delete")
    .then((response)=>{
      if (response.data.code==2001){
        arr.value.splice(i,1);
        ElMessage.success("删除完成!");
      }
    })

  }
}
const arr = ref([]);
const loadData = ()=>{
  axios.get(BASE_URL+'/v1/users/admin')
      .then((response)=>{
        if (response.data.code==2001){
          arr.value = response.data.data;
        }
      })
}
onMounted(()=>{
  loadData();
})
</script>

<style scoped>

</style>